<template>
	<div class="footer">
		<footer class="fixBottomBox">
			<ul>
				<router-link tag="li" to="/home" class="tabItem">
					<a href="javascript:void(0);" class="tab-item-link">
						<div :class="{actived: pathnameCurrent == 'home'}" class="bot_nav_item_wrap">
							<img v-if="pathnameCurrent == 'home'" src="../assets/images/home_icon1.png" alt="" class="tab-item-icon">
							<img v-else src="../assets/images/home_icon0.png" alt="" class="tab-item-icon">
							<p>首页</p>
						</div>
					</a>
				</router-link>
				<router-link tag="li" to="/category" class="tabItem">
					<a href="javascript:void(0);" class="tab-item-link">
						<div :class="{actived: pathnameCurrent == 'category'}" class="bot_nav_item_wrap">
							<img v-if="pathnameCurrent == 'category'" src="../assets/images/category_icon1.png" alt="" class="tab-item-icon">
							<img v-else src="../assets/images/category_icon0.png" alt="" class="tab-item-icon">
							<p>分类</p>
						</div>
					</a>
				</router-link>
				<router-link tag="li" :to="{path: '/orders', query: {orderStatus: 6}}" class="tabItem">
					<a href="javascript:void(0);" class="tab-item-link">
						<div :class="{actived: pathnameCurrent == 'orders'}" class="bot_nav_item_wrap">
							<img v-if="pathnameCurrent == 'orders'" src="../assets/images/dingdan_icon1.png" alt="" class="tab-item-icon">
							<img v-else src="../assets/images/dingdan_icon0.png" alt="" class="tab-item-icon">
							<p>订单</p>
						</div>
					</a>
				</router-link>
				<router-link tag="li" to="/cart" class="tabItem">
					<a href="javascript:void(0);" class="tab-item-link position_rel">
						<div :class="{actived: pathnameCurrent == 'cart'}" class="bot_nav_item_wrap">
							<img v-if="pathnameCurrent == 'cart'" src="../assets/images/cart_icon1.png" alt="" class="tab-item-icon">
							<img v-else src="../assets/images/cart_icon0.png" alt="" class="tab-item-icon">
							<span v-show="cartProductNums>0" class="order_nums">{{cartProductNums}}</span>
							<p>购物车</p>
						</div>
					</a>
				</router-link>
				<router-link tag="li" to="/mine" class="tabItem">
					<a href="javascript:void(0);" class="tab-item-link">
						<div :class="{actived: pathnameCurrent == 'mine'}" class="bot_nav_item_wrap">
							<img v-if="pathnameCurrent == 'mine'" src="../assets/images/mine_icon1.png" alt="" class="tab-item-icon">
							<img v-else src="../assets/images/mine_icon0.png" alt="" class="tab-item-icon">
							<p>我的</p>
						</div>
					</a>
				</router-link>
			</ul>
		</footer>
	</div>
</template>
<script>
	export default {
		created() {
			var _this = this
			var pathname = location.pathname
			_this.pathnameCurrent = pathname.split('/')[2]
			console.log('_this.pathnameCurrent', _this.pathnameCurrent)
		},
		data() {
			return {
				cartProductNums: 0,
				pathnameCurrent: 'home'
			}
		},
		mounted() {

		},
		methods: {
			getCartProductNums() {
				var _this = this;
				_this.$http.get('/client/Carts', null, localStorage.Authorization, res => {
					console.log('获取购物车商品数量res', res)
					if(res.code === 200) {
						_this.cartProductNums = res.data.dataCount;
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
		},
		watch: {
			//			$route(to) {
			//				var _this = this
			//				var pathname = location.pathname
			//				_this.pathnameCurrent = pathname.split('/')[2]
			//				console.log('_this.pathnameCurrent', _this.pathnameCurrent)
			//			},
		},
	}
</script>
<style scoped="scoped">
	.order_nums {
		position: absolute;
		top: 6px;
		right: 12px;
		display: inline-block;
		width: 18px;
		height: 18px;
		border: 1px solid red;
		border-radius: 50%;
		color: red;
		line-height: 18px;
		background: #fff;
		text-align: center;
		font-size: 12px;
	}
	
	.bot_nav_item_wrap {
		width: 100%;
	}
	
	.tab-item-link .actived p {
		color: red;
	}
	
	.bot_nav_item_wrap img {
		margin-top: 4px;
		width: auto!important;
	}
	
	.bot_nav_item_wrap p {
		font-size: 10px;
		color: #666;
	}
</style>